<template>
  <div id="barCharts" ref="barCharts" class="barCharts" />
</template>
<script>
import { trimStart } from 'lodash'
export default {
  name: 'BarCharts',
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    lengendData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      bar1Data: [],
      bar2Data: [],
      monthData: []
    }
  },
  watch: {
    datas: {
      handler(newValue) {
        if (JSON.stringify(newValue) !== '{}') {
          // this.echartData = newValue
          this.monthData = newValue['name']
          this.bar1Data = newValue['data1']
          this.bar2Data = newValue['data2']
          this.getEcharts()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // const bar1Data = [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130]
    // const bar2Data = [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130].map((v) => v * 1.2)
    // const monthData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
  },
  methods: {
    getEcharts() {
      const self = this
      const myChart = this.$echarts.init(this.$refs.barCharts)
      myChart.setOption({
        backgroundColor: '#fff',
        legend: {
          show: true,
          width: '100%',
          itemWidth: 8,
          itemHeight: 8,
          right: '5%',
          orient: 'horizontal'
        },
        grid: {
          right: '5%'
        },
        xAxis: [
          {
            type: 'category',
            data: self.monthData,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: '#C9CDD4'
              }
            },
            axisLabel: {
              margin: 10,
              color: '#656C74',
              formatter: function(value, index) {
                // 格式化你的标签
                return `${trimStart(value.split('-')[1], '0')}月` // 例如，将所有标签转换为大写
              }
            }
          },
          {
            type: 'category',
            show: false,
            data: self.monthData,
            axisTick: { show: false }
          }
        ],
        yAxis: {
          type: 'value',
          name: '在营/关闭',
          nameTextStyle: {
            align: 'center'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        color: ['#4D94FF', '#21D9C6'],
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:3',
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: `时间：{b}<br/>拥堵指数：{c}`
        },
        series: [
          {
            name: self.lengendData.split(',')[0],
            data: self.bar1Data,
            type: 'bar',
            barGap: 0,
            barWidth: '20%',
            z: 99,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          },
          {
            name: self.lengendData.split(',')[1],
            data: self.bar2Data,
            type: 'bar',
            barGap: 0,
            barWidth: '20%',
            z: 99,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          },
          {
            data: self.bar2Data,
            type: 'bar',
            xAxisIndex: 1,
            z: 9,
            itemStyle: {
              color: 'rgba(255,255,255,0)'
            },
            tooltip: {
              show: false
            }
          }
        ]

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.barCharts{
  width: 100%;
  height: 300px;
}
</style>
